<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .overimg {
            overflow: hidden;
            width: 292px;
            height: 393px;
            margin:0 auto;
            position: relative;
            display: block;
            -webkit-box-shadow: 0 0 10px #FFF;
            box-shadow: 0 0 10px #FFF;
        }

        .light {
            position: absolute;
            left: -402px;
            top: 0;
            width: 313px;
            height: 393px;
            background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
            background-image: -moz-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
            background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
            background-image: -o-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
            background-image: -ms-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
            transform: skewx(-25deg);
            -o-transform: skewx(-25deg);
            -moz-transform: skewx(-25deg);
            -webkit-transform: skewx(-25deg);
            -moz-transition: 0s;
            -o-transition: 0s;
            -webkit-transition: 0s;
            transition: 0s;
            cursor: pointer;
        }


        .overimg:hover .light {
            left:387px;
            transition:.7s;
            -moz-transition:.7s;
            -o-transition:.7s;
            -webkit-transition:.7s

        }

    </style>
</head>
<body>
<div class="overimg">
    <a><img src="src/images/hw1.jpg" ></a>

    <i class="light"></i>
</div>

</body>
</html>